<template>
  <div>
    <Divider orientation="right">
      <Select v-model="selectedLog" filterable clearable style="width:240px; float: right;">
        <Option v-for="log in logs" :value="log" :key="log">{{ log }}</Option>
      </Select>
    </Divider>
    <!-- <Collapse :value="selectedLog ? '1' : '0'">
      <Panel name="1">
        {{selectedLog}}
        <div slot="content">
          <p v-for="(log, index) in logContents" :key="index">{{log}}</p>
        </div>
      </Panel>
    </Collapse> -->
    <div v-html="logContents"></div>
  </div>
</template>

<script>
import { getAllLogs, getLogByFileName } from "../api/lsystem";
import * as Markdown from 'markdown-it'
export default {
  name: "logs",

  data() {
    return {
      logs: [],
      selectedLog: "",
      logContents: "",
      loading: false
    };
  },

  watch: {
    selectedLog() {
      if (this.selectedLog)
        this.fetchOneLog(this.selectedLog);
    }
  },

  mounted() {
    this.fetchAllLogs();
  },

  methods: {
    async fetchAllLogs() {
      this.loading = true;
      const res = await getAllLogs();
      const data = res.data;
      const logs = []
      for (let log in data) {
        logs.push(...data[log].map(l => `${log}/${l}`))
      }
      this.logs = logs
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },

    async fetchOneLog(name) {
      this.loading = true;
      const res = await getLogByFileName(name);
      // this.logContents = res.data ? res.data.split("\n") : ['无内容'];
      let md = new Markdown()
      console.log(md)
      this.logContents = md.render('```log\n' + res.data + '\n```')
    }
  }
};
</script>

<style scoped>
</style>